.vf-explorer-item--unselectable {
  @apply cursor-not-allowed opacity-50;
}
.vuefinder__explorer__container {
  @apply relative flex flex-auto flex-col;
}

.vuefinder__explorer__header {
  @apply grid grid-cols-12 divide-x border-b border-(--vf-border-primary) bg-(--vf-bg-secondary) px-1 text-xs select-none;
}

.vuefinder__explorer__sort-button {
  @apply cursor-pointer border-(--vf-border-primary);
}

.vuefinder__explorer__sort-button--name {
  @apply col-span-7;
}

.vuefinder__explorer__sort-button--size {
  @apply col-span-2 justify-center;
}

.vuefinder__explorer__sort-button--date {
  @apply col-span-3 justify-center;
}

.vuefinder__explorer__sort-button--path {
  @apply col-span-5 justify-center;
}

.vuefinder__explorer__drag-item {
  @apply relative z-1;
}

.vuefinder__explorer__scroll-content {
  @apply min-h-full;
}

.vuefinder__explorer__selector-area {
  @apply z-0 h-full w-full overflow-y-auto p-1 text-xs;
  scrollbar-width: none;
}
.vuefinder__explorer__selector-area::-webkit-scrollbar {
  display: none;
}

.vuefinder__explorer__item-list-content {
  @apply grid grid-cols-12 items-center;
}

.vuefinder__explorer__item-list-name {
  @apply col-span-7 flex items-center;
}

.vuefinder__explorer__item-name,
.vuefinder__explorer__item-path {
  @apply col-span-5 overflow-hidden text-ellipsis whitespace-nowrap;
}

.vuefinder__explorer__item-size {
  @apply col-span-2 text-center whitespace-nowrap;
}

.vuefinder__explorer__item-date {
  @apply col-span-3 overflow-hidden px-1 text-ellipsis whitespace-nowrap md:px-3;
}

.vuefinder__explorer__item-grid-content {
  @apply relative;
}

.vuefinder__explorer__item-thumbnail {
  @apply m-auto h-10 md:h-12;
}

.vuefinder__explorer__item-title {
  @apply break-all;
}

.vf-explorer-item-list {
  @apply pointer-events-auto relative my-0.5 grid w-full grid-cols-1 border border-transparent bg-transparent select-none;
}

.vf-explorer-item-list:hover {
  @apply bg-(--vf-bg-hover);
}

.vf-explorer-item-grid {
  @apply pointer-events-auto relative m-1 inline-flex h-20 w-[5.5rem] justify-center border border-transparent bg-transparent text-center select-none md:w-24;
}

.vf-explorer-item-grid:hover {
  @apply bg-(--vf-bg-hover);
}

.vf-explorer-selected {
  @apply border-(--vf-border-primary) bg-(--vf-bg-selected);
}

/* Row classes for virtual scrolling */
.vf-explorer-item-grid-row {
  @apply relative;
}

.vf-explorer-item-list-row {
  @apply relative;
}

/* Icon styling */
.vuefinder__explorer__item-list-icon {
  @apply flex items-center justify-center;
}

.vuefinder__explorer__sort-icon {
  @apply ml-1.5 inline-flex h-4 w-4 flex-shrink-0 text-(--vf-accent-primary);
}

/* Linear loader */
.vuefinder__linear-loader {
  @apply absolute h-1 animate-pulse bg-(--vf-accent-primary);
}
